<template>
    <div>
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="班级名" label-width="80px" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年级" label-width="80px" prop="grade">
                <el-input v-model="form.grade" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属专业" prop="majorId"  >
                <el-select v-model="form.majorId" placeholder="请选择专业">
                    <el-option v-for="item in list" :label="item.name" :value="item.id" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style=" display: flex; justify-content: flex-end;">
                <el-button type="primary" @click="submit">确定</el-button>
                <el-button @click="qx">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { classadd } from '@/api/class';
import { majornames } from '@/api/class';
export default {
    data() {
        return {
            form: {
                id: -1,
                name: "",
                grade: "",
                majorId: ''

            },
            rules: {
                name: [{
                    required: true, message: "请输入班级名", trigger: "blur"
                }],
                majorId: [
                    {
                        required: true,
                        message: '请选择专业',
                        trigger: 'blur'
                    }
                ],
                grade: [{
                    required: true, message: "请输入年级", trigger: "blur"
                }],
            },
            list: []

        }
    },
    methods: {
        submit() {
              
            // 触发表单验证
            this.$refs['form'].validate(falg => {
                if (falg) {
                    classadd(this.form).then(res => {
                        if (res.code === 0) {
                            this.$message({
                                type: "success",
                                message: "添加成功"
                            })
                            // 通知父级关闭对话框
                            this.$emit("close")
                        }

                    })
                }
            })

        },
        getlist() {
            majornames().then(res => {
                this.list = res.data
            })
        },
        qx() {
            // 通知父级关闭对话框
            this.$emit('close')
        }

    },
    mounted(){
        this.getlist()
    }

}
</script>

<style lang="sass" scoped>

</style>